<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <!--禁止uc浏览器判断到页面上文字居多时，自动放大字体。-->
    <meta name="wap-font-scale" content="no">
    <meta name="author" content="深圳方维网络科技有限公司  http://www.szfangwei.cn">

    <meta name="keywords" content="百宝库">
    <meta name="description" content="">
    <title>百宝库注册</title>

    <link href="/Public/phone/css/style.css?v=20190408_1" rel="stylesheet">
    <link rel="stylesheet/less" type="text/css" href="/Public/phone/css/style.less?v=20190509_1"/>
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <script src="/Public/phone/js/less.js"></script>
    <script src="/Public/common/layer/layer.js?v=20182145212"></script>
    <style>
        body {
            background: #F8F8F8;
        }
        .item {
            display: flex;
            flex-direction: row;
            height: 52px;
            width: 100%;
            background: #FFF;
            border-bottom: 1px solid #F2F2F2;
            justify-content: center;
        }

        .item-icon {
            width: 19px;
            height: 19px;
        }

        .a_btn_code {
            width: 76px;
            line-height: 29px;
            background: #d10015;
            color: #FFF;
            font-size: 13px;
            text-align: center;
            border-radius: 5px;
        }
        .am-column {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        input {
            border: 0;
            line-height: 25px;
        }

        .am-input {
            font-size: 14px;
        }

        .a_btn{
            width:303px;
            line-height: 44px;
            border-radius: 5px;
            text-align: center;
            background: #d10015;
            color:#FFF;
        }
    </style>
</head>
<body>
<!-- 头部 -->
<div class="header">
    <div class="clearfix box">
        <a class="return" href="javascript:history.back(-1)"></a>
        <h2>欢迎加入</h2>
    </div>
</div>

<!-- 主体 -->
<div class="container pt50">
    <!--顶部banner-->
    <div>
        <image src=""></image>
    </div>
    <form action="/Inters/system/codeSkip" method="post" id="test_from">
        <div class="form-bg">
            <!--请输入手机号码-->
            <div class="item">
                <div class="am-column" style="margin-right: 22px;">
                    <image class="item-icon" src="/Public/phone/images/sj.png"></image>
                </div>

                <div class="am-column" style="width:calc(100% - 198px);">
                    <input type="number" placeholder="请输入手机号码" maxlength="11" class="am-input" name="phone" id="phone">
                </div>

                <div class="am-column" style="padding-right: 29px;">
                    <a class="a_btn_code" onclick="phone_code(this)">获取验证码</a>
                </div>
            </div>

            <!--动态验证码-->
            <div class="item">
                <div class="am-column" style="margin-right: 22px;">
                    <image class="item-icon" src="/Public/phone/images/yzm.png"></image>
                </div>
                <div class="am-column" style="width:calc(100% - 91px);">
                    <input type="number" name="code" placeholder="6位动态验证码" class="am-input" id="code">
                </div>
            </div>

            <!--请输入密码-->
            <div class="item">
                <div class="am-column" style="margin-right: 22px;">
                    <image class="item-icon" src="/Public/phone/images/mm.png"></image>
                </div>
                <div class="am-column" style="width:calc(100% - 91px);">
                    <input type="password" placeholder="请输入登录密码" name="password" class="am-input" id="password">
                </div>
            </div>
        </div>
        <div style="text-align: center;margin-top:43px;">
            <button type="button" class="a_btn" onclick="btn()">立即注册</button>
        </div>
    </form>
</div>
<!-- /主体 -->

<!-- 底部 -->
<script>
    let status = true;
    let time   = 60;
    let but    = '';
    function phone_code(obj) {
        let phone  = document.getElementsByName('phone')[0].value;
        if (status == false) {
            return;
        }
        if (phone.length != 11 || phone[0] != 1) {
            return layer.msg('手机号格式有误');
        }

        $.get('/Inters/system/sendMsg',{phone:phone},function (e) {
            if (e.status == '0') {
                return layer.msg(e.info);
            }
            if (e.status == '1')  {
                if (status) {
                    obj.setAttribute('class', 'a_btn_code a_btn_code_dis');
                    obj.innerHTML = time + 's';
                    status = false;
                }
                but = setInterval(function () {
                    time -= 1;
                    obj.innerHTML = time + 's';
                    if (time == 0) {
                        obj.setAttribute('class', 'a_btn_code');
                        obj.innerHTML = '获取验证码';
                        status = true;
                        time = 60;
                        clearInterval(but)
                    }
                },1000)
            }
        });
    }

    function btn() {
        let phone    = document.getElementById('phone').value;
        let code     = document.getElementById('code').value;
        let password = document.getElementById('password').value;

        if (phone.length != 11 || phone[0] != 1) {
            return layer.msg('手机号格式有误');
        }
        if (code.length != 6) {
            return layer.msg('验证码格式有误');
        }
        if (password.length < 6) {
            return layer.msg('密码长度至少6位');
        }

        $.post('/Inters/system/codeSkip', {phone:phone, code:code, password:password}, function (e) {
            switch (e) {
                case 0:
                    setTimeout(function () {
                        window.location.href = '/Inters/system/codeDownload';
                    }, 1000);
                    layer.msg('注册成功');
                    break;
                case 1:
                    layer.msg('验证码错误');
                    break;
                case 2:
                    layer.msg('你已是我们网站的会员了');
                    break;
                default:
                    layer.msg('系统繁忙请稍后再试');
                    break;
            }
        })
    }
</script>

<!-- /底部 -->
</body>
</html>